<template>
    <basic-container>
        <avue-crud
                :table-loading="loading"
                :data="data"
                :page.sync="page"
                :option="option"
                :search.sync="query"
                @search-change="searchChange"
                @search-reset="searchReset"
                @current-change="currentChange"
                @size-change="sizeChange"
        >
            <template slot-scope="{disabled,size}" slot="datetimeSearch">
                <ya-day-time-picker :day-time-rang.sync="dayTimeRang" :selectedDay="selectedDay"></ya-day-time-picker>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>

  import yaDayTimePicker from "../../../components/date/ya-day-time-picker";
  import { getPage } from "@/youan/api/audit/regionData";
  import {dateFormat} from "../../../../util/date";

  export default {
    name: "origin",
    data() {
      return {
        data: [],
        loading: false,
        query: {
          sourceIp:this.$route.query.sourceIp || "",
          destinationIp: this.$route.query.destIp || "",
          direction: this.$route.query.visitDirection || "",
          ruleIdList:this.$route.query.issueType ? [this.$route.query.issueType] : [],
        },
        page: {
          pageSize: 50,
          currentPage: 1,
          total: 0
        },
        dayTimeRang: [],
        selectedDay: dateFormat(new Date(), "yyyy-MM-dd"),
        option: {
          border: true,
          index: true,
          height:'auto',
          calcHeight: 30,
          searchShow: true,
          delBtn: false,
          editBtn: false,
          searchMenuSpan: 5,
          addBtn: false,
          page: true,
          viewBtn: true,
          dialogType: 'drawer',
          column: [
            {
              label: "主键",
              prop: "id",
              hide: true,
              display: false
            },
            {
              label: "源ip",
              prop: "sourceIp",
              searchSpan: 5,
              search: true
            },
            {
              label: "源端口",
              prop: "sourcePort",
            },
            {
              label: "目的ip",
              prop: "destinationIp",
              searchSpan: 5,
              search: true
            },
            {
              label: "目的端口",
              prop: "destinationPort",
            },
            {
              label: "规则",
              prop: "ruleIdList",
              searchSpan: 5,
              type: "select",
              dicUrl: "/api/log-rule/eventrulenum/dropdown",
              props: {
                label: "ruleName",
                value: "ruleId"
              },
              hide: true,
              searchMultiple: true,
              searchFilterable: true,
              search: true,
              display: false
            },
            {
              label: "规则",
              prop: "ruleName",
            },
            {
              label: "获取时间",
              prop: "datetime",
              searchslot:true,
              searchSpan: 8,
              search: true
            },
            {
              label: "方向",
              prop: "direction",
              searchSpan: 5,
              dicData: [
                {
                  label: "源ip归属山东",
                  value: "s"
                },
                {
                  label: "目的ip归属山东",
                  value: "d"
                }
              ],
              type: "select",
              hide: true,
              search: true,
              display: false
            },
            {
              label: "方向",
              prop: "directionName",
            },
            {
              label: "登录失败的账户",
              prop: "loginFailureAccount",
              hide: true,
              row: true,
              span: 24,
              labelWidth: 120
            },
            {
              label: "错误信息",
              prop: "payload",
              hide: true,
              row: true,
              span: 24,
              type: "textarea"
            },
          ]
        }
      }
    },
    activated() {
        if(this.query.sourceIp == "" && this.query.destinationIp == "") {
          return;
        }
        this.query = {
          sourceIp:this.$route.query.sourceIp || "",
          destinationIp: this.$route.query.destIp || "",
          direction: this.$route.query.visitDirection || "",
          ruleIdList:this.$route.query.issueType ? [this.$route.query.issueType] : [],
        };
        if(this.$route.query.visitDate) {
          this.selectedDay = dateFormat(new Date(this.$route.query.visitDate), "yyyy-MM-dd");
        }
        this.$nextTick(()=> {
          this.onLoad(this.page, this.query);
        })
    },
    methods: {
      async onLoad(page, params = {}) {
        params.startTime = this.dayTimeRang[0];
        params.endTime = this.dayTimeRang[1];
        params.ruleIds = this.query.ruleIdList.join(",");
        params.sourceIp = this.query.sourceIp;
        params.destinationIp = this.query.destinationIp;
        params.direction = this.query.direction;
        this.loading = true;
        try {
          const result = await getPage(page.currentPage, page.pageSize ,params);
          if(result.data.success) {
            const data = result.data.data;
            this.page.total = data.total;
            this.data = data.records;
            this.loading = false;
          }
        }catch (e) {
          this.page.total = 0;
          this.data = [];
          this.loading = false;
        }
      },
      searchChange(params, done) {
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
        this.onLoad(this.page);
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
        this.onLoad(this.page);
      },
    },
    beforeRouteUpdate (to, from, next) {
      this.query = {
        sourceIp:to.query.sourceIp || "",
        destinationIp: to.query.destIp || "",
        direction: to.query.visitDirection || "",
        ruleIdList:this.$route.query.issueType ? [this.$route.query.issueType] : [],
      };
      this.selectedDay = dateFormat(new Date(this.$route.query.visitDate), "yyyy-MM-dd");
      this.onLoad(this.page, this.query);
      next()
    },
    components: {
      yaDayTimePicker
    }
  }
</script>

<style scoped>

</style>